/**
 * Created by ljf on 2018/4/19.
 * 对话框（单个按钮）
 */
import React, { Component } from "react";
import { StyleSheet, Text } from "react-native";
import { commonStyles } from "../../configs/commonStyle";
import PropTypes from "prop-types";
import { Button, Dialog, View } from "react-native-ui-lib";
import { isIPhoneX } from "../../configs/platform";

export default class OkDialog extends Component {

  static propTypes = {
    ok: PropTypes.string,//确定
    canCancel: PropTypes.bool,//是否可以点击返回或者屏幕关闭对话框
  };
  static defaultProps = {
    ok: "确定",
    canCancel: true,
  };

  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      title: "提示",
      content: null,
    };
  }


  /**
   * 显示对话框
   * @param title 标题
   * @param content 内容
   */
  show = (content, title = "提示") => {
    this.setState({ isOpen: true, content, title });
  };

  dismiss = () => {
    this.setState({ isOpen: false }, () => this.props.callback && this.props.callback());
  };

  renderPannableHeader = props => {
    const { title } =this.state;
    return (
      <View>
        <View margin-10 center>
          <Text style={{ ...commonStyles.text_black_18 }}>{title}</Text>
        </View>
        <View height={1} bg-line />
      </View>
    );
  };


  render() {
    const { isOpen, showHeader, content, } = this.state;
    return (
      <Dialog
        migrate
        useSafeArea
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        width={"70%"}
        onDismiss={this.dismiss}
        renderPannableHeader={this.renderPannableHeader}
      >
        <View padding-10>
          {
            content && <Text style={styles.content}>{content}</Text>
          }
        </View>
        <View row style={{ borderTopColor: "#eeeeee", borderTopWidth: 1 }}>
          <Button flex label={"确定"} background-white labelStyle={{ color: "#F9D63B" }} text14
                  onPress={() => {
                    this.dismiss();
                    this.props.callBack && this.props.callBack();
                  }}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: "white",
    marginBottom: isIPhoneX ? 0 : 20,
    borderRadius: 4,
  },
  content: {
    fontSize: 14,
    color: "#141414",
    lineHeight: 25,
    minHeight: 50,
    textAlign: "center",
  },
});

